<template>
  <div class="system-page">
    <div class="system-header">
      <h1 class="system-title">系统管理</h1>
      <p class="system-subtitle">管理系统参数、配置和其他系统级别的设置</p>
    </div>
    
    <div class="system-content">
      <div class="system-section">
        <h2 class="section-title">系统参数设置</h2>
        <div class="placeholder-content">
          <i class="fas fa-cogs"></i>
          <p>系统参数配置区域</p>
        </div>
      </div>
      
      <div class="system-section">
        <h2 class="section-title">系统日志</h2>
        <div class="placeholder-content">
          <i class="fas fa-clipboard-list"></i>
          <p>系统日志记录区域</p>
        </div>
      </div>
      
      <div class="system-section">
        <h2 class="section-title">备份和恢复</h2>
        <div class="placeholder-content">
          <i class="fas fa-database"></i>
          <p>系统备份与恢复区域</p>
        </div>
      </div>
      
      <div class="system-section">
        <h2 class="section-title">商户数据测试</h2>
        <div v-if="merchantListData.length > 0" class="merchant-test-content">
          <table class="merchant-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>名称</th>
                <th>创建时间</th>
                <th>状态</th>
                <th>评分</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="merchant in merchantListData" :key="merchant.id">
                <td>{{ merchant.id }}</td>
                <td>{{ merchant.name }}</td>
                <td>{{ merchant.createTime }}</td>
                <td :class="'status-' + merchant.status">{{ merchant.status }}</td>
                <td>{{ merchant.rating }}</td>
              </tr>
            </tbody>
          </table>
          <div class="status-summary">
            <p>状态分布：活跃 {{ statusCount.活跃 }}，待审核 {{ statusCount.待审核 }}，已禁用 {{ statusCount.已禁用 }}</p>
          </div>
        </div>
        <div v-else class="placeholder-content">
          <i class="fas fa-spinner fa-spin"></i>
          <p>正在加载商户数据...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 系统管理页面逻辑
import { ref, onMounted } from 'vue';
import { generateMerchantListData } from '@/utils/adminMock';

const merchantListData = ref<any[]>([]);
const statusCount = ref({
  活跃: 0,
  待审核: 0,
  已禁用: 0
});

onMounted(() => {
  // 生成10个商户数据进行测试
  merchantListData.value = generateMerchantListData(10);
  
  // 统计状态分布
  merchantListData.value.forEach(merchant => {
    statusCount.value[merchant.status]++;
  });
  
  // 在控制台打印数据，方便检查
  console.log('商户列表数据:', merchantListData.value);
  console.log('状态分布:', statusCount.value);
});
</script>

<style scoped>
.system-page {
  padding: 20px;
}

.system-header {
  margin-bottom: 24px;
}

.system-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.system-subtitle {
  font-size: 14px;
  color: #666;
  margin: 8px 0 0 0;
}

.system-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.system-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #333;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background-color: #f9f9f9;
  border-radius: 6px;
  text-align: center;
}

.placeholder-content i {
  font-size: 40px;
  color: #ccc;
  margin-bottom: 16px;
}

.placeholder-content p {
  color: #999;
  margin: 0;
}

.merchant-test-content {
  width: 100%;
  overflow-x: auto;
}

.merchant-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.merchant-table th, 
.merchant-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.merchant-table th {
  background-color: #f5f5f5;
  font-weight: 600;
}

.merchant-table tr:hover {
  background-color: #f9f9f9;
}

.status-活跃 {
  color: #28a745;
}

.status-待审核 {
  color: #ffc107;
}

.status-已禁用 {
  color: #dc3545;
}

.status-summary {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .system-content {
    grid-template-columns: 1fr;
  }
}
</style> 